<template>
  <div class="foot-container">
    <div class="foot-wrap" @click="bottomtab(0)"><img :src="flag==0?'images/home-on.png':'images/home-off.png'" alt=""></div>
    <div class="foot-wrap" @click="bottomtab(1)"><img :src="flag==1?'images/category-on.png':'images/category-off.png'" alt=""></div>
    <div class="foot-wrap" @click="bottomtab(2)"><a href="https://wqs.jd.com/pingou/index.shtml?sceneval=2&fromM=1&ptag=138097.1.6"><img src="images/groupbuy.png" alt=""></a></div>
    <div class="foot-wrap" @click="bottomtab(3)"><img src="images/cart.png" alt=""></div>
    <div class="foot-wrap" @click="bottomtab(4)"><img src="images/login.png" alt=""></div>
  </div>
</template>

<script>
import store from "../../store/index.js";
export default {
  name: "foot",
  store: store,
  computed: {
    flag() {
      return this.$store.state.homeTabIndex;
    }
  },

  methods: {
    bottomtab(index) {
      this.$store.commit("homeTabIndexChange", index);
      if (index == 0) {
        this.$router.push({ path: "/" }).catch(function() {
          return;
        });
      }

      if (index == 1) {
        this.isClick = false;
        this.$router.push({ path: "/category" }).catch(function() {
          return;
        });
      }

      // if (index == 2) {
      //   this.isClick = false;
      //   this.$router.push({ path: "/groupbuy" }).catch(function() {
      //     return;
      //   });
      // }

      if (index == 3) {
        this.isClick = true;
        this.$router.push({ path: "/cart" }).catch(function() {
          return;
        });
      }
      if (index == 4) {
        this.isClick = true;
        this.$router.push({ path: "/login" }).catch(function() {
          return;
        });
      }
    }
  }
};
</script>

<style scoped>
.foot-container {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
}

.foot-wrap {
  width: 20%;
  text-align: center;
  flex-shrink: 0;
}

.foot-wrap img{
    width: 60px;
    height: 46px;
}
</style>